<script>
    js;
    // 获取所有的导航链接
    const links = document.querySelectorAll('.elevator a');

    // 获取所有的内容区块
    const sections = document.querySelectorAll('.section');

    // 监听窗口滚动事件
    window.addEventListener('scroll', function () {
        // 获取滚动条的位置
        const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

        // 遍历所有的内容区块
        sections.forEach(function (section) {
            // 获取内容区块的位置信息
            const offsetTop = section.offsetTop;
            const offsetHeight = section.offsetHeight;

            // 判断当前内容区块是否在可视范围内
            if (scrollTop >= offsetTop && scrollTop < offsetTop + offsetHeight) {
                // 如果在可视范围内，则将对应的导航链接设置为 active 状态
                links.forEach(function (link) {
                    if (link.getAttribute('href') === '#' + section.getAttribute('id')) {
                        link.classList.add('active');
                    } else {
                        link.classList.remove('active');
                    }
                });
            }
        });
    });

    // 监听所有的导航链接的点击事件
    links.forEach(function (link) {
        link.addEventListener('click', function (event) {
            event.preventDefault();

            // 获取目标内容区块的位置信息
            const targetId = link.getAttribute('href');
            const targetSection = document.querySelector(targetId);
            const targetOffsetTop = targetSection.offsetTop;

            // 使用动画滑动到目标内容区块
            window.scrollTo({
                top: targetOffsetTop,
                behavior: 'smooth',
            });
        });
    });
</script>
